import './App.css';
import './fonts/iconfont/iconfont.css'
import React, { Component,lazy,Suspense } from 'react';

// 导入Route组件，配置路由规则
// 导入Redirect组件，配置重定向路由
// 导入Switch组件，内部包裹的多个同级路由，匹配路由成功后渲染该组件，不再继续匹配后续路由
import { Route,Redirect,Switch } from 'react-router-dom'

// 导入组件(打包后运行会全部加载，容易出现首页白屏)
// import Index from './views/Index'
// import Regsiter from './views/Register'
// import Login from './views/Login';
// import NotFound from './views/NotFound'

// 通过  lazy  实现懒加载导入组件(路由懒加载，按需加载；跳转该路由，才加载该组件)
// 路由组件的lazyLoad，懒加载问题，当使用通过React的lazy函数配合import()函数动态加载路由组件
let Index = lazy(()=> import('./views/Index'))
let Regsiter = lazy(()=> import('./views/Register'))
let Login = lazy(()=> import('./views/Login'))
let NotFound = lazy(()=> import('./views/NotFound'))
let Detai = lazy(()=> import('./views/Detai'))
let Search = lazy(()=> import('./views/Search'))
let Collection = lazy(()=> import('./views/Collection'))

class App extends Component {
  render() { //渲染组件模板到视图
    return (
      <div>
        {/* Suspense 路由加载，网路较慢是的加载loading */}
        {/* suspended=>当网速慢时，指定路由组件页面未加载出，则需使用suspense中的fallback在指定页面出现前，加载fallback中的内容。 */}
        <Suspense fallback={<div className='loading'></div>}>
        {/* Switch 包裹路由，内部匹配路由成功则不再继续匹配后续路由 */}
        {/* 配置一级路由 Route 即配置路由又充当路由出口*/}
        <Switch>
          {/* Route 配置路由规则： exact：是否精确匹配路由；path：路由地址；component：路由地址对应组件 */}
          {/* 注意: 当某个组件内存在嵌套子路由时, 当前组件所在的路由规则就不能添加 exact 精确匹配属性 */}
          <Route path='/index' component={Index} ></Route>
          <Route exact path='/Login' component={Login} ></Route>
          <Route exact path='/Regsiter' component={Regsiter} ></Route>
          <Route exact path='/detai' component={Detai}></Route>
          <Route exact path='/search' component={Search}></Route>
          <Route exact path="/collection" component={Collection}></Route>
          {/* Redirect 配置重定向，from设置为 '/'  */}
          <Redirect exact from='/' to='/index' ></Redirect>
          {/* Route 配置404路由，path设置为 '*' */}
          <Route path='*' component={NotFound}></Route>
        </Switch>
        </Suspense>

      </div>
    );
  }
}

export default App;